<template>
	<view class="review-page">
		<view class="item-card">
			<image class="pic" :src="item.coverImage || '/static/logo.png'" mode="aspectFill" />
			<view class="meta">
				<text class="title">{{ item.title || '商品' }}</text>
				<text class="tip">为您的本次购买打个分吧</text>
			</view>
		</view>
		<view class="rating">
			<text class="label">评分</text>
			<view class="stars">
				<text v-for="i in 5" :key="i" class="star" :class="{on: i<=rating}" @click="rating=i">★</text>
			</view>
		</view>
		<view class="section">
			<textarea class="textarea" v-model="content" placeholder="说说商品的质量、口感或使用感受..." />
		</view>
		<button class="submit" :disabled="submitting" @click="submit">{{ submitting ? '提交中...' : '提交评价' }}</button>
	</view>
</template>

<script>
import { api } from '../../utils/request.js'

export default {
	data(){ return { orderId:null, item:{}, productId:null, rating:5, content:'', submitting:false } },
	onLoad(q){
		if(q && q.data){ try{ const d = JSON.parse(decodeURIComponent(q.data)); this.orderId=d.orderId; this.item=d.item||{}; this.productId=this.item.productId; }catch{} }
	},
	methods:{
		async submit(){
			if(!this.productId || !this.orderId){ uni.showToast({ icon:'none', title:'数据不完整' }); return; }
			this.submitting = true;
			try{
				const res = await api.createReview({ productId:this.productId, orderId:this.orderId, orderItemId:this.item.id, rating:this.rating, content:this.content });
				if(res.code===0){
					uni.showToast({ title:'评价已提交' });
					setTimeout(()=>{
						const pages = getCurrentPages();
						const prev = pages[pages.length - 2];
						if(prev && typeof prev.refreshOrders === 'function'){ prev.refreshOrders(); }
						uni.navigateBack();
					}, 600);
				}else{
					uni.showToast({ icon:'none', title: res.message || '提交失败' });
				}
			}catch{ uni.showToast({ icon:'none', title:'提交失败' }); }
			finally{ this.submitting=false; }
		}
	}
}
</script>

<style>
.review-page{ padding: 16rpx; display:flex; flex-direction: column; gap: 16rpx; }
.item-card{ display:flex; gap: 16rpx; background:#fff; border-radius: 18rpx; padding: 20rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,.05); }
.pic{ width: 140rpx; height: 140rpx; border-radius: 12rpx; background:#fafafa; }
.meta{ flex:1; }
.title{ font-size: 28rpx; color:#333; }
.tip{ font-size: 24rpx; color:#999; margin-top: 6rpx; }
.rating{ display:flex; align-items:center; gap: 16rpx; background:#fff; border-radius: 18rpx; padding: 20rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,.05); }
.label{ font-size: 28rpx; color:#333; }
.stars{ color:#ffd21e; font-size: 36rpx; }
.star{ padding: 0 6rpx; opacity: .5; }
.star.on{ opacity: 1; }
.section{ background:#fff; border-radius: 18rpx; padding: 16rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,.05); }
.textarea{ min-height: 200rpx; width: 100%; font-size: 28rpx; }
.submit{ margin-top: 10rpx; background: linear-gradient(135deg,#39c5bb,#54e0c7); color:#fff; border-radius: 20rpx; padding: 20rpx 0; font-size: 30rpx; width: 90%; align-self:center; }
</style>

